<template>
    <div class="BackgroundMusic-content">
        <!-- 上传功能区域 -->
        <el-upload v-model:file-list="fileList" style="margin: 0 auto 20px 0;"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :show-file-list="false"
            :limit="3" :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError">
            <el-button type="primary">上传背景音乐</el-button>
            <!-- <template #tip>
                <div class="el-upload__tip">
                    jpg/png files with a size less than 500KB.
                </div>
            </template> -->
        </el-upload>
    </div>
    <!-- 歌曲列表 -->
    <el-row :gutter="20" class="BackgroundMusic-grid" v-for="(song, index) in props.songs" :key="index"
        justify="center" tabindex="0">
        <!-- 歌曲信息 -->
        <el-col :span="16" class="BackgroundMusic-song-info">
            <div style="display: flex; flex-direction: row; align-items: center; justify-content: left; ">
                <img :src="song.icon" class="BackgroundMusic-song-icon" />
                <el-text class="mx-1" :truncated="true" style="text-align: left;">{{ song.title }}</el-text>
            </div>
        </el-col>
        <!-- 音频播放器 -->
        <el-col :span="6" class="BackgroundMusic-audio">
            <div style="display: flex;justify-content: flex-start; align-items: center; width: 100%;">
            <audio controls>
                <source :src="song.audioSrc" type="audio/mpeg" />
            </audio>
        </div>
        </el-col>
        <!-- 选择按钮 -->
        <el-col :span="2" class="BackgroundMusic-select">
            <div style="display: flex;justify-content: center; align-items: center; width: 100%;">
                <el-button style="width:100px;height: 40px;" @click="selectSong(song)">选择</el-button>
            </div>
            
        </el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider />
    <!-- 分页器 -->
    <el-pagination background layout="prev, pager, next" :total="100" class="BackgroundMusic-pagination" />
</template>

<script lang="ts">
export default {
    name: 'BackgroundMusicContent',
};
</script>

<script setup lang="ts">
import { ref } from 'vue';
import { ISong, Song } from '../../../src/composables/types'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'

/**
 * 定义组件的Props。
 * @property {ISong[]} songs - 歌曲列表，包含多个ISong类型的对象。
 */
const props = defineProps({
    songs: Array
})

/**
 * 上传背景音乐
 * 此函数暂未实现具体逻辑
 */
function uploadMusic() {
    console.log('上传背景音乐');
}

/**
 * 选择背景音乐
 * @param {Object} song - 被选择的歌曲对象
 * 此函数暂未实现具体逻辑
 */
function selectSong(song: ISong) {
    console.log('选择背景音乐');
}

// 测试数据
const fileList = ref<UploadUserFile[]>([
    {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
    {
        name: 'element-plus-logo2.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
])

const handleSuccess: UploadProps['onSuccess'] = (response, file, fileList) => {
    console.log('上传成功', response, file, fileList);
    ElMessage({
        message: '上传成功',
        type: 'success',
    })
}

const handleError: UploadProps['onError'] = (err, file, fileList) => {
    console.log('上传失败', err, file, fileList)
    ElMessage({
        message: '上传失败',
        type: 'warning',
    })
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage({
        message: '上传文件数量超出3个文件限制了',
        type: 'warning',
    })
}

</script>

<style scoped>
/* 内容区域样式 */
.BackgroundMusic-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;

}

/* 上传按钮样式 */
.BackgroundMusic-upload {
    margin-bottom: 20px;
    margin-right: auto;
    width: 100px;
    height: 40px;
    justify-content: flex-start;
}

/* 歌曲列表样式 */
.BackgroundMusic-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    /* 移除外边距 */
}

/* 歌曲信息、音频和选择按钮的公共样式 */
.BackgroundMusic-song-info,
.BackgroundMusic-audio,
.BackgroundMusic-select {
    padding: 10px 0;
    /* 行内上下各10px的内边距 */
}

/* 歌曲信息样式 */
.BackgroundMusic-song-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* 歌曲图标样式 */
.BackgroundMusic-song-icon {
    width: 50px;
    height: 50px;
    margin-right: 8px;
}

/* 歌曲名称样式 */
.BackgroundMusic-song-name {
    word-break: break-all;
}

/* 音频播放器样式 */
.BackgroundMusic-audio {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 选择按钮样式 */
.BackgroundMusic-select {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 分页器样式 */
.BackgroundMusic-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 奇数行背景色 */
.odd-row {
    background-color: #fafafa;
}

/* 鼠标悬停时的背景色 */
.BackgroundMusic-row:hover {
    background-color: #fafafa;
}

/* 鼠标选中时的背景色 */
.BackgroundMusic-row:focus {
    background-color: #ecf5ff;
    outline: none;
    /* 去掉默认的焦点边框 */
}
</style>